<template>
    <div class="public-table">
        <div class="table-head">
            <div class="search-btn">
                <n-input
                    v-model:value="searchKey"
                    clearable
                    placeholder="请输入关键字"
                />
            </div>
            <div class="action-btn">
                <slot name="action"></slot>
                <n-button type="primary" @click="onAdd"
                    >添加{{ pageTitle }}</n-button
                >
                <n-button type="error" @click="handleConfirm(checkedRowKeys)"
                    >批量删除</n-button
                >
            </div>
        </div>
        <div ref="tableBoxRef" class="table-container">
            <n-spin v-if="loading" :show="loading">
                <template #description> loading... </template>
            </n-spin>
            <n-data-table
                v-else-if="tableData?.length"
                :columns="columns"
                :data="tableData"
                :max-height="tableHeight"
                :min-height="tableHeight"
                :pagination="pagination"
                :row-key="rowKey"
                bordered
                @update:checked-row-keys="handleCheck"
            />
            <EmptyData v-else></EmptyData>
        </div>
        <PublicEdit
            v-model="showModel"
            :table-name="tableName"
            :form-list="formFields"
            :rules="formRules"
            :title="modelTitle"
            :is-edit="isEdit"
            :data-id="editData?._id"
            @save-success="init"
        ></PublicEdit>
        <PublicDetails
            v-model="showDrawer"
            :table-name="tableName"
            :page-title="pageTitle"
            :data-id="editData?._id"
            :form-list="formFieldsView"
        >
        </PublicDetails>
    </div>
</template>

<script setup>
import PublicEdit from '../PublicEdit/index.vue';
import PublicDetails from '../PublicDetails/index.vue';
import useTable from './useTable';
import useModel from './useModel';
import { ref, onMounted, computed } from 'vue';
import { deepClone } from '@/utils';

const props = defineProps({
    // 表名
    tableName: {
        type: String,
        default: '',
        required: true
    },
    // 表格字段配置
    tableColumns: {
        type: Array,
        default: () => []
    },
    // 弹窗标题
    pageTitle: {
        type: String,
        default: ''
    },
    // 表单字段
    formFields: {
        type: Array,
        default: () => []
    },
    // 表单校验规则
    formRules: {
        type: Object,
        default: () => ({})
    },
    showDetails: {
        type: Boolean,
        default: false
    },
    // 详情隐藏字段
    detailsHiddenFields: {
        type: Array,
        default: () => []
    },
    searchFields: {
        type: Array,
        default: () => []
    }
});
const tableBoxRef = ref(null);
const tableHeight = ref(0);
const editData = ref(null);
const formFieldsView = computed(() => {
    const list = deepClone(props.formFields);
    list.forEach(item => {
        item.comProps.disabled = true;
        const detailField = props.detailsHiddenFields;
        if (detailField?.length && detailField.indexOf(item.code) > -1) {
            item.visible = false;
        }
    });
    return list;
});

onMounted(() => {
    tableHeight.value = tableBoxRef.value?.offsetHeight - 88;
});
const { isEdit, showModel, modelTitle, onAdd, onEdit } = useModel(
    props,
    editData
);
const {
    columns,
    loading,
    tableData,
    searchKey,
    pagination,
    showDrawer,
    checkedRowKeys,
    init,
    rowKey,
    handleCheck,
    handleConfirm
} = useTable({ props, onEdit, editData });

defineExpose({
    init
});
</script>
<style lang="less" scoped>
@import './index';
</style>
